<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:wicket="http://wicket.apache.org/">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>WiQuery application</title>
	</head>
	
	<wicket:head>
		<style>
			td {
				padding-bottom: 15px;
			}
		</style>
	</wicket:head>
	
	<body>
		<wicket:extend>
			<table style="height: 100%; width: 100%;">
				<thead>
		  		 		<tr>
		  		 			<th style="text-align: center;"></th>
		  		 			<th style="text-align: center;"></th>
		  		 		</tr>
		  		 </thead>

		  		 <tbody>
		  		 		<tr>
		  		 			<td style="width: 25%; border-right: 1px black solid;">
		  		 				The text on the right was hidden on the page load
		  		 			</td>
		  		 			
		  		 			<td>
								<p wicket:id="hideTextOnLoad">
								    Hide text on load.  You
								    should feel <em>lucky</em> to have seen such a paragraph in
								    your life.  Congratulations!
								</p>
		  		 			</td>
		  		 		</tr>
		  		 
		  		 		<tr>
		  		 			<td style="width: 25%; border-right: 1px black solid;">
		  		 				<button wicket:id="hideButton">
								   A button with 'hide' effect
								</button>
		  		 			</td>
		  		 			
		  		 			<td>
								<p id="hideText">
								    Hide text.  You
								    should feel <em>lucky</em> to have seen such a paragraph in
								    your life.  Congratulations!
								</p>
		  		 			</td>
		  		 		</tr>
		  		 		
		  		 		<tr>
		  		 			<td style="width: 25%; border-right: 1px black solid;">
		  		 				<button wicket:id="showButton">
								   A button with 'show' effect
								</button>
		  		 			</td>
		  		 			
		  		 			<td>
								<p id="showText" style="display:none">
								    Show text.  You
								    should feel <em>lucky</em> to have seen such a paragraph in
								    your life.  Congratulations!
								</p>
		  		 			</td>
		  		 		</tr>
		  		 		
		  		 		<tr>
		  		 			<td style="width: 25%; border-right: 1px black solid;">
		  		 				<button wicket:id="toggleButton">
								   A button with 'toggle' effect
								</button>
		  		 			</td>
		  		 			
		  		 			<td>
								<p id="toggleText">
								    Toggle text.  You
								    should feel <em>lucky</em> to have seen such a paragraph in
								    your life.  Congratulations!
								</p>
		  		 			</td>
		  		 		</tr>
		  		 		
		  		 		<tr>
		  		 			<td style="width: 25%; border-right: 1px black solid;">
		  		 				<button wicket:id="slideToggleButton">
								   A button with 'hide' effect
								</button>
		  		 			</td>
		  		 			
		  		 			<td>
								<p id="slideToggleText">
								    SlideToggle text.  You
								    should feel <em>lucky</em> to have seen such a paragraph in
								    your life.  Congratulations!
								</p>
		  		 			</td>
		  		 		</tr>
		  		 </tbody>
			</table>
		</wicket:extend>
	</body>
</html>
